<template>
    <div>
        <el-tabs v-model="activeName2" type="card">
            <el-tab-pane label="基础信息" name="second">
                <div class="second-contain">
                    <div class="head">
                        <h1>基础信息</h1>
                    </div>
                    <div class="second-contain-box second-contain-box2 ma">
                        <el-row>
                            <el-col :span="8">
                                <span>三方姓名：{{ schInfo.contact }}</span>
                            </el-col>
                            <el-col :span="8">
                                <span>三方单位：{{ schInfo.name }}</span>
                            </el-col>
                            <el-col :span="8">
                                <span>联系电话：{{ schInfo.phone }}</span>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <span>分成比例：{{ schInfo.thirdProportion }}%</span>
                            </el-col>
                            <el-col :span="8">
                                <span>意向程度：{{ schInfo.tripartiteType }}</span>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <span>地区：{{ address + schInfo.address }}</span>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="second-contain-box second-contain-box2 ma"></div>
                </div>
            </el-tab-pane>
        </el-tabs>
        <div class="second-contain" style="padding-bottom:50px;margin-top:20px">
            <div class="head">
                <h1>跟进情况</h1>
            </div>
            <Crm-table
                :showBatchDelete="showBatchDelete"
                class="tracking-table"
                :data="detailRecordInfoData2"
                :columns="columns3"
                @findPage2="findPage3"
                @handleSee="handleSee"
                :loading="loading"
            ></Crm-table>
        </div>
        <KtButton
            :label="$t('action.close')"
            perms="true"
            size="medium"
            style="margin-top: 2%;"
            @click="closeSelectedTag()"
        ></KtButton>
    </div>
</template>
<script>
import { hasPermission } from "@/permission/index.js";
import axios from "axios";
import KtButton from "@/views/Core/KtButton";
import api from "@/http/api";
import CrmTable from "@/views/Core/CrmTable";
import { CodeToText } from "element-china-area-data";
export default {
    name: "SeeSchoolfile",
    components: {
        KtButton,
        CrmTable
    },
    data() {
        return {
            filters: {
                name: ""
            },
            address: "",
            contractDate: true,
            selection: false,
            activeName2: "second",
            showBatchDelete: false,
            loading: false, // 加载标识
            // schInfo: [], //调用查询详情接口，赋值对象，上面就自动显示
            student_system_cache_options: [], // 学制
            student_level_cache_options: [], // 学段
            student_data_from_options: [], // 客户来源
            student_type_options: [], // 客户类型
            student_progress_options: [], // 客户进展
            student_communication_type: [],
            // 客户跟进数据
            followdata: [],
            pageResult: {},
            pageRequest: { pageNum: 1, pageSize: 10 },
            editLoading: false,
            queryid: "",
            loading: false, // 加载标识
            schInfo: {
                address: ""
            },
            // 报备数据
            // detailRecordInfoData: [],// 报备数据
            detailRecordInfoData: {
                content: []
            },
            detailRecordInfoData2: {
                content: []
            },
            rowData: [],
            school_recordType_options: [],
            pageRequest2: {
                pageNum: 1,
                pageSize: 10
            },
            queryTrackingHeader: [],
            dialogVisible: false,
            trackingData: [],
            schoolInfo: [],
            tripartiteTypeOption: [],
            columns3: [
                { type: "index", label: "序号", minWidth: 10 },
                { prop: "communicationDate", label: "沟通时间", minWidth: 100 },
                {
                    prop: "communicationContent",
                    label: "沟通内容",
                    minWidth: 100
                },
                {
                    prop: "nextTrackingDate",
                    label: "下次跟进时间",
                    minWidth: 100
                }
            ]
        };
    },
    watch: {
        // $route: "getParams"
    },
    beforeMount: function() {
        //   请求页面传过来的ID根据ID发送请求
        let routerParams = this.$route.query;
        let id = routerParams.id;
        if (id) {
            this.$api.agent
                .queryByIdTripartiteList({
                    id: id
                })
                .then(res => {
                    if (res.result == 2) {
                        this.$message({ message: res.msg, type: "error" });
                    } else {
                        let resData = res.data;
                        this.schInfo = res.data;
                        this.$api.dropdown.tripartiteType().then(res => {
                            if (res.result == 2) {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            } else {
                                this.tripartiteTypeOption = res.keyValueList;
                                //转换y意向程度
                                this.tripartiteTypeOption.forEach(type_item => {
                                    if (
                                        type_item.key ==
                                        this.schInfo.tripartiteType
                                    ) {
                                        this.schInfo.tripartiteType =
                                            type_item.value;
                                    }
                                });
                            }
                        });

                        //省市区赋值
                        let str = /^[\u4e00-\u9fa5]+$/;
                        let selectedOptions = [];
                        if (
                            !str.test(resData.province) &&
                            !str.test(resData.city) &&
                            !str.test(resData.area)
                        ) {
                            selectedOptions.push(
                                "" + JSON.parse(resData.province) + "",
                                "" + JSON.parse(resData.city) + "",
                                "" + JSON.parse(resData.area) + ""
                            );

                            this.schoolInfo.selectedOptions = selectedOptions;
                        }
                        if (
                            (resData.province == null) &
                                (resData.city == null) &
                                (resData.area == null) &
                                (resData.address == null) ||
                            (resData.province == "null") &
                                (resData.city == "null") &
                                (resData.area == "null") &
                                (resData.address == "null")
                        ) {
                            this.address = " ";
                            this.schInfo.address = "";
                        } else if (
                            (resData.province == null) &
                                (resData.city == null) &
                                (resData.area == null) &
                                (resData.address != null) ||
                            (resData.province == "null") &
                                (resData.city == "null") &
                                (resData.area == "null") &
                                (resData.address != "null")
                        ) {
                            this.address = "";
                            this.schInfo.address = resData.address;
                        } else if (resData.address == null) {
                            this.address =
                                CodeToText[resData.province] +
                                CodeToText[resData.city] +
                                CodeToText[resData.area];
                            this.schInfo.address = "";
                        } else if (
                            (resData.province != null &&
                                resData.city != null &&
                                resData.area != null &&
                                resData.address != null) ||
                            (resData.province != "null" &&
                                resData.city != "null" &&
                                resData.area != "null" &&
                                resData.address != "null")
                        ) {
                            this.address =
                                CodeToText[resData.province] +
                                CodeToText[resData.city] +
                                CodeToText[resData.area];
                            this.schInfo.address = resData.address;
                        }
                        if (
                            this.schInfo.contractStartDate == null &&
                            this.schInfo.contractEndDate == null
                        ) {
                            this.contractDate = "";
                        } else {
                            this.contractDate =
                                this.schInfo.contractStartDate +
                                "——" +
                                this.schInfo.contractEndDate;
                        }
                    }
                });
        }
    },
    methods: {
        get_page_data() {},
        // 查询报备列表
        findPage2(data) {
            if (data !== null) {
                this.pageRequest2 = data.pageRequest;
            }
            // 查询表头

            this.queryTrackingHeader = JSON.parse(
                localStorage.getItem("schoolTrackingHeader")
            );
            this.$api.school
                .detailRecordInfo({
                    id: this.$route.query.id,
                    pageSize: this.pageRequest2.pageSize,
                    pageNum: this.pageRequest2.pageNum
                })
                .then(res => {
                    let content = {
                        content: res.trackLists,
                        totalSize: res.total
                    };
                    this.detailRecordInfoData = content;
                    this.detailRecordInfoData.content.forEach(item => {
                        this.school_recordType_options.forEach(type_item => {
                            if (type_item.key == item.recordType) {
                                item.recordType = type_item.value;
                            }
                            this.queryTrackingHeader.forEach(i2 => {
                                item.trackingDate =
                                    item.trackingDateStart +
                                    "--" +
                                    item.trackingDateEnd;
                            });
                        });
                    });
                })
                .then(data != null ? data.callback : "");
        },
        handleSee(params) {
            this.dialogVisible = true;
            this.rowData = params.row;
        },
        handleCloseDialogVisible() {
            this.dialogVisible = false;
        },
        hasPerms: function(perms) {
            // 根据权限标识和外部指示状态进行权限判断
            return hasPermission(perms) & !this.disabled;
        },
        handleClose() {
            this.$router.push({ path: "/Customer/School" });
        },

        // 学制
        get_system_cache() {
            this.student_system_cache_options = JSON.parse(
                localStorage.getItem("systemCache")
            );
            // this.$api.user.optionsList({ codeType: "system_cache" }).then(res => {
            //   this.student_system_cache_options = res.systemList;
            // });
        },

        // 学段
        get_level_cache() {
            this.student_level_cache_options = JSON.parse(
                localStorage.getItem("schoolSection")
            );
        },

        // 客户来源
        get_student_data_from() {
            this.student_data_from_options = JSON.parse(
                localStorage.getItem("schoolSource")
            );
        },
        // 报备类别
        schoolVisitType() {
            // this.$api.dropdown.schoolVisitType().then(res => {
            //   this.school_recordType_options = res.keyValueList;
            // });
            this.school_recordType_options = JSON.parse(
                localStorage.getItem("schoolRecordTypeOptions")
            );
        },
        // 客户类型
        get_student_type() {
            this.student_type_options = JSON.parse(
                localStorage.getItem("schoolType")
            );
        },

        // 客户进展
        get_student_progress() {
            this.student_progress_options = JSON.parse(
                localStorage.getItem("schoolProgress")
            );
        },

        // 沟通方式
        get_contractType() {
            this.student_communication_type = JSON.parse(
                localStorage.getItem("contractType")
            );
        },

        // 获取分页数据
        findPage: function(data) {
            if (data !== null) {
                this.pageRequest = Object.assign({}, data.pageRequest);
            } else {
                this.pageRequest = Object.assign({}, this.pageRequest);
            }
            this.pageRequest.id = this.$route.query.id;

            this.$api.school
                .schooldetail(this.pageRequest)
                .then(res => {
                    let content = {
                        content: res.trackLists,
                        totalSize: res.total
                    };
                    this.pageRequest = content;
                    this.pageRequest.content.forEach(item => {
                        //转换客户进展
                        this.student_progress_options.forEach(progress_type => {
                            if (progress_type.key == item.progressTrack) {
                                item.jinzhan = progress_type.value;
                            }
                        });

                        //转换客户类型
                        this.student_type_options.forEach(student_type => {
                            if (student_type.key == item.typeTrack) {
                                item.typeName = student_type.value;
                            }
                        });

                        //转换沟通形式
                        this.student_communication_type.forEach(
                            communication_type => {
                                if (
                                    communication_type.key ==
                                    item.communicationType
                                ) {
                                    item.communicationTypeName =
                                        communication_type.value;
                                }
                            }
                        );
                    });
                })
                .then(data != null ? data.callback : "");
        },

        isActive(route) {
            return route.path === this.$route.path;
        },
        closeSelectedTag(view) {
            this.$store.dispatch("delVisitedViews", this.$route).then(views => {
                if (this.isActive(this.$route)) {
                    const latestView = views.slice(-1)[0];
                    if (latestView) {
                        this.$router.push(latestView);
                    } else {
                        this.$router.push("/");
                    }
                }
            });
        },

        handleFollow(params) {
            this.dataForm = Object.assign({}, params.row);
            this.$router.push({
                path: "/Follow/SchoolFollow",
                query: {
                    id: params.row.id,
                    name: this.schInfo.name
                }
            });
        },
        // 查询跟进列表
        findPage3(data) {
            if (data !== null) {
                this.pageRequest3 = data.pageRequest;
            }

            this.$api.school
                .sfTrackingInfoPageList({
                    tripartiteId: this.$route.query.id,
                    pageSize: this.pageRequest3.pageSize,
                    pageNum: this.pageRequest3.pageNum
                })
                .then(res => {
                    let content = {
                        content: res.data,
                        totalSize: res.total
                    };
                    this.detailRecordInfoData2 = content;
                    this.detailRecordInfoData2.content.forEach(item => {
                        this.school_recordType_options.forEach(type_item => {
                            if (type_item.key == item.recordType) {
                                item.recordType = type_item.value;
                            }
                        });
                        item.trackingDateStart = /\d{4}-\d{1,2}-\d{1,2}/g.exec(
                            item.trackingDateStart
                        );
                        item.communicationDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(
                            item.communicationDate
                        );
                        item.nextTrackingDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(
                            item.nextTrackingDate
                        );
                    });
                })
                .then(data != null ? data.callback : "");
        }
    },

    mounted() {
        this.get_system_cache();
        this.get_level_cache();
        this.get_student_data_from();
        this.get_student_type();
        this.get_student_progress();
        // this.get_contractType();
        this.get_page_data();
        this.schoolVisitType();
        this.findPage2(null);
    }
};
</script>
<style lang="scss" scoped>
.trckingList {
    ul {
        padding-left: 0;
        li {
            list-style: none;
            text-align: left;
            line-height: 30px;
            .title {
                font-weight: bold;
            }
        }
    }
}
.third-contain-box {
    text-align: left;
    width: 90%;
    margin: 20px auto;
    border: 1px solid #e4e7ed;
    overflow: hidden;
    .head h1 {
        font-size: 20px;
        font-weight: bold;
        padding: 20px;
    }
}
.second-contain {
    text-align: left;
    width: 90%;
    margin: 0 auto;
    border: 1px solid #e4e7ed;
    .head h1 {
        font-size: 20px;
        font-weight: bold;
        padding: 20px;
    }
    .second-contain-box {
        width: 95%;
        margin-left: 2%;
        .el-form {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            .el-form-item {
                display: flex;

                margin-left: 20px;
            }
        }
        .el-table td {
            border-bottom: 0px !important;
        }
        .address span {
            display: inline-block;
            margin: 0 20px;
        }
    }
}
.stu-btn {
    margin: 20px 0;
}
</style>
<style lang="scss">
.second-contain-box {
    width: 95%;
    .el-table td,
    .el-table th.is-leaf {
        border-bottom: 0px !important;
    }
    .has-gutter {
        display: none;
    }
    .el-row {
        margin: 30px 0;
    }
    .el-row .el-col {
        margin-left: 0 !important;
    }
}
.second-contain-box2 {
    .el-row .el-col {
        margin: 10px 0;
    }
}
</style>
